<template>
  <div id="shopping">
    <nav-bar>
      <template v-slot:center>
        <div class="shopping_center">购物车({{getCartLength}})</div>
      </template>
    </nav-bar>

    <car-list :cart-list="getCartList"></car-list>
    <car-botton-bar></car-botton-bar>
  </div>
</template>

<script>
import NavBar from "@/components/common/navbar/NavBar";
import {mapGetters} from 'vuex';
import CarList from "@/views/shoppingCart/childComps/CarList";
import CarBottonBar from "@/views/shoppingCart/childComps/CarBottonBar";

/**
 * 在Vuex中, 提供了为getters映射到局部计算属性的辅助函数  mapGetters
 * mapGetters辅助函数仅仅是将store中的getter映射到局部计算属性
 */
export default {
  name: "shopping",
  components: {CarBottonBar, CarList, NavBar},
  data(){
    return{
    }
  },
  created() {
    this.$store.commit('alertMyTage',true);
  },
  computed:{
    ...mapGetters([//使用对象展开运算符,将getter混入到computed对象中
      "getCartLength",
      "getCartList"
    ]),

  }
}
</script>

<style scoped>
#shopping{
  position: relative;
  width: 100%;
}
.shopping_center{

}
</style>
